// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// Licensed under the 【火山方舟】原型应用软件自用许可协议
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at 
//     https://www.volcengine.com/docs/82379/1433703
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React from 'react';

import styles from './index.module.less';

interface Props {
  position: {
    x: number;
    y: number;
  };
  size: {
    width: number;
    height: number;
  };
}

const BorderBox = (props: Props) => {
  const { position, size } = props;

  return (
    <div
      className={styles['border-box']}
      style={{ top: position.y, left: position.x, width: size.width, height: size.height }}
    >
      <div className={styles['top-left-rounded']}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M2 22V15C2 7.8203 7.8203 2 15 2H22"
            stroke="white"
            strokeWidth="4"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
      <div className={styles['top-right-rounded']}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M22 22V15C22 7.8203 16.1797 2 9 2H2"
            stroke="white"
            strokeWidth="4"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
      <div className={styles['bottom-left-rounded']}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M2 2V9C2 16.1797 7.8203 22 15 22H22"
            stroke="white"
            strokeWidth="4"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
      <div className={styles['bottom-right-rounded']}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M22 2V9C22 16.1797 16.1797 22 9 22H2"
            stroke="white"
            strokeWidth="4"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
      <div className={styles['slogan-container']}>
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="53" height="18" viewBox="0 0 53 18" fill="none">
            <path
              d="M5.04071 0.427734C4.77379 0.427734 4.54675 0.61491 4.52017 0.862997C4.51463 0.908406 4.5102 0.952704 4.50577 0.998113C4.32524 2.78124 4.22667 4.56769 4.31638 6.35747C4.36179 7.25014 4.66968 16.0273 4.71177 17.2556C4.71731 17.4328 4.8635 17.5723 5.04071 17.5723C5.21681 17.5723 5.36079 17.4317 5.36632 17.2556C5.41395 15.8712 5.72073 7.25125 5.76614 6.35747C5.85696 4.56769 5.75728 2.78124 5.57675 0.998113C5.57232 0.952704 5.56678 0.908406 5.56235 0.862997C5.53466 0.616018 5.30873 0.427734 5.04182 0.427734H5.04071Z"
              fill="white"
            />
            <path
              d="M1.19605 9.58259C1.15175 9.25919 1.12185 8.94576 1.04211 8.64119C0.994482 8.45845 0.818387 8.32776 0.615708 8.32776C0.41303 8.32776 0.238042 8.45734 0.189311 8.64119C0.109568 8.94576 0.0796635 9.25919 0.0353621 9.58259C-0.0532405 10.1663 0.0475469 10.7444 0.0996009 11.3214C0.137257 11.7556 0.230288 12.7601 0.284557 13.192C0.294525 13.2685 0.304495 13.346 0.314463 13.4224C0.326645 13.5786 0.455115 13.7026 0.6146 13.7026C0.774085 13.7026 0.902561 13.5786 0.914744 13.4224C0.924711 13.346 0.934681 13.2685 0.944649 13.192C0.998918 12.7601 1.09195 11.7556 1.12961 11.3214C1.18277 10.7444 1.28355 10.1663 1.19384 9.58259H1.19605Z"
              fill="white"
            />
            <path
              d="M7.88713 4.24887C7.87938 4.17466 7.86388 4.10046 7.8517 4.02625C7.81847 3.82468 7.63351 3.67627 7.41533 3.67627C7.40979 3.67627 7.40536 3.67738 7.39982 3.67738C7.39429 3.67738 7.38985 3.67627 7.38432 3.67627C7.16613 3.67627 6.98007 3.82579 6.94795 4.02625C6.93576 4.10046 6.92026 4.17466 6.91251 4.24887C6.72644 6.06411 6.68989 6.54699 6.73973 8.27475C6.75191 8.68675 6.93244 13.4846 7.06756 15.5357C7.07864 15.7008 7.21597 15.8281 7.381 15.8281C7.38764 15.8281 7.39318 15.827 7.39871 15.8259C7.40536 15.8259 7.41089 15.8281 7.41643 15.8281C7.58145 15.8281 7.71879 15.7008 7.72987 15.5357C7.86498 13.4846 8.04662 8.68564 8.0577 8.27475C8.10754 6.54699 8.07099 6.06411 7.88492 4.24887H7.88713Z"
              fill="white"
            />
            <path
              d="M10.0471 9.58259C10.0028 9.25919 9.97293 8.94576 9.89319 8.64119C9.84556 8.45845 9.66946 8.32776 9.46678 8.32776C9.2641 8.32776 9.08912 8.45734 9.04039 8.64119C8.96064 8.94576 8.93074 9.25919 8.88644 9.58259C8.79783 10.1663 8.89862 10.7444 8.95068 11.3214C8.98833 11.7556 9.08136 12.7601 9.13563 13.192C9.1456 13.2685 9.15557 13.346 9.16554 13.4224C9.17661 13.5786 9.3062 13.7026 9.46568 13.7026C9.62517 13.7026 9.75474 13.5786 9.76582 13.4224C9.77579 13.346 9.78576 13.2685 9.79572 13.192C9.84999 12.7601 9.94302 11.7556 9.98068 11.3214C10.0338 10.7444 10.1346 10.1663 10.0449 9.58259H10.0471Z"
              fill="white"
            />
            <path
              d="M3.1679 4.24887C3.16014 4.17466 3.14464 4.10046 3.13246 4.02625C3.09923 3.82468 2.91428 3.67627 2.69609 3.67627C2.69055 3.67627 2.68612 3.67738 2.68058 3.67738C2.67505 3.67738 2.67062 3.67627 2.66508 3.67627C2.44689 3.67627 2.26083 3.82579 2.22871 4.02625C2.21653 4.10046 2.20102 4.17466 2.19327 4.24887C2.0072 6.06411 1.97065 6.54699 2.02049 8.27475C2.03268 8.68675 2.21321 13.4846 2.34832 15.5357C2.3594 15.7008 2.49674 15.8281 2.66176 15.8281C2.6684 15.8281 2.67394 15.827 2.67948 15.8259C2.68612 15.8259 2.69166 15.8281 2.69719 15.8281C2.86222 15.8281 2.99955 15.7008 3.01063 15.5357C3.14575 13.4846 3.32738 8.68564 3.33846 8.27475C3.3883 6.54699 3.35175 6.06411 3.16568 4.24887H3.1679Z"
              fill="white"
            />
            <path
              d="M32.0627 5.43201H31.2819C31.2021 5.43201 31.1368 5.49625 31.1368 5.57599V12.5302H28.739V4.45184C28.739 4.3721 28.6736 4.30786 28.595 4.30786H27.8142C27.7344 4.30786 27.6691 4.3721 27.6691 4.45184V12.5302H25.2713V5.57599C25.2713 5.49625 25.2059 5.43201 25.1273 5.43201H24.3454C24.2657 5.43201 24.2014 5.49625 24.2014 5.57599V13.4561C24.2014 13.5358 24.2668 13.6001 24.3454 13.6001H32.0638C32.1435 13.6001 32.2078 13.5358 32.2078 13.4561V5.57599C32.2078 5.49625 32.1424 5.43201 32.0638 5.43201H32.0627Z"
              fill="white"
            />
            <path
              d="M20.656 8.88706H21.5897C21.6705 8.88706 21.7215 8.82171 21.7337 8.75747C21.943 7.14269 22.0028 6.14591 22.0194 5.69404C22.0194 5.61429 21.9541 5.54895 21.8754 5.54895H20.9506C20.8687 5.54895 20.8056 5.60654 20.8067 5.68296C20.7923 6.04845 20.7369 7.07735 20.5209 8.71871C20.5154 8.75637 20.5265 8.79624 20.5519 8.82836C20.5763 8.85937 20.6117 8.88041 20.656 8.88706Z"
              fill="white"
            />
            <path
              d="M14.4033 8.86895C14.4255 8.88667 14.452 8.89663 14.4753 8.89663C14.4808 8.89663 14.4875 8.89663 14.4919 8.89442H15.4355C15.482 8.89442 15.5219 8.8767 15.5485 8.84569C15.574 8.81578 15.585 8.77702 15.5795 8.73493C15.3646 7.07474 15.3082 6.0392 15.2938 5.6715C15.2938 5.59951 15.2262 5.53638 15.1487 5.53638H14.215C14.1353 5.53638 14.071 5.60172 14.071 5.68257C14.0877 6.13555 14.1486 7.13898 14.3568 8.77037C14.3568 8.80914 14.3745 8.84458 14.4033 8.86784V8.86895Z"
              fill="white"
            />
            <path
              d="M22.2997 12.5312C21.582 12.4559 20.7037 11.9708 20.0082 11.2664C19.1111 10.3516 18.6171 9.18758 18.5961 7.97372C18.5961 7.92388 18.6005 7.87626 18.6005 7.82531V4.30889C18.6005 4.22915 18.5352 4.16492 18.4565 4.16492H17.6469C17.5672 4.16492 17.5029 4.22915 17.5029 4.30889V7.82531C17.5029 7.87404 17.5063 7.92056 17.5074 7.96818C17.4852 9.17983 16.9902 10.3427 16.0953 11.2565C15.3997 11.9608 14.5215 12.4459 13.8016 12.5224C13.724 12.5357 13.6731 12.5921 13.6731 12.6663L13.6831 13.4671C13.6831 13.5081 13.703 13.5502 13.7373 13.5789C13.7628 13.6011 13.7949 13.6133 13.8237 13.6133C13.8293 13.6133 13.8348 13.6133 13.8403 13.6122C14.8593 13.5147 15.9801 12.9632 16.8373 12.1336C17.2526 11.7327 17.7089 11.1712 18.0534 10.4258C18.3978 11.1701 18.8541 11.7327 19.2695 12.1325C20.1167 12.9598 21.2364 13.5125 22.2642 13.6111C22.2709 13.6122 22.2775 13.6122 22.2842 13.6122C22.3163 13.6122 22.3473 13.6011 22.3728 13.5789C22.4049 13.5513 22.4237 13.5092 22.4237 13.4671L22.4337 12.6752C22.4337 12.601 22.3827 12.5445 22.303 12.5312H22.2997Z"
              fill="white"
            />
            <path
              d="M41.8207 5.25209H38.3541V4.30072C38.3541 4.22098 38.2888 4.15674 38.2101 4.15674H37.4282C37.3485 4.15674 37.2842 4.22098 37.2842 4.30072V5.25209H33.8077C33.7279 5.25209 33.6626 5.31633 33.6626 5.39607V6.17799C33.6626 6.25773 33.7279 6.32197 33.8077 6.32197H35.4225C35.4092 7.06512 35.3638 8.26347 35.2076 9.3256C34.9462 11.081 34.4035 12.6526 34.1034 13.4345C34.0901 13.4744 34.0968 13.5187 34.12 13.5519C34.1433 13.583 34.1787 13.6018 34.2175 13.6018H35.0847C35.1367 13.6018 35.1888 13.5663 35.2176 13.5087C35.4978 12.7468 36.0061 11.2106 36.2587 9.47954C36.283 9.3112 36.3041 9.14064 36.324 8.97008H40.3244V12.4732H38.7251C38.6454 12.4732 38.5811 12.5374 38.5811 12.6172V13.3991C38.5811 13.4788 38.6465 13.5431 38.7251 13.5431H41.2503C41.33 13.5431 41.3954 13.4788 41.3954 13.3991V8.84493C41.3954 8.84493 41.3932 8.83828 41.3932 8.83496C41.3932 8.83163 41.3954 8.82831 41.3954 8.82499V8.04307C41.3954 7.96333 41.33 7.89909 41.2503 7.89909H36.4226C36.4647 7.29992 36.4835 6.74726 36.4912 6.32086H41.8218C41.9015 6.32086 41.9658 6.25662 41.9658 6.17688V5.39496C41.9658 5.31522 41.9004 5.25098 41.8218 5.25098L41.8207 5.25209Z"
              fill="white"
            />
            <path
              d="M51.9394 8.55807H51.0832V5.01508C51.0832 4.93533 51.0179 4.8711 50.9382 4.8711H48.3476V4.30072C48.3476 4.22098 48.2823 4.15674 48.2036 4.15674H47.4217C47.342 4.15674 47.2778 4.22098 47.2778 4.30072V4.8711H44.8024C44.7227 4.8711 44.6573 4.93533 44.6573 5.01508C44.6573 5.70064 44.6573 7.32207 44.6141 8.55807H43.4678C43.3881 8.55807 43.3228 8.62231 43.3228 8.70205V9.48397C43.3228 9.56372 43.3881 9.62795 43.4678 9.62795H44.5565C44.4192 11.3158 44.0349 12.6194 43.7248 13.4345C43.7115 13.4744 43.7181 13.5187 43.7414 13.5519C43.7646 13.583 43.8001 13.6018 43.8389 13.6018H44.7061C44.7581 13.6018 44.8102 13.5663 44.839 13.5087C45.0771 12.8453 45.4847 11.4809 45.6308 9.62795H50.0122V12.4743H49.1373C49.0576 12.4743 48.9922 12.5385 48.9922 12.6183V13.4002C48.9922 13.48 49.0576 13.5442 49.1373 13.5442H50.9382C51.0179 13.5442 51.0832 13.48 51.0832 13.4002V9.62795H51.9394C52.0191 9.62795 52.0833 9.56372 52.0833 9.48397V8.70205C52.0833 8.62231 52.018 8.55807 51.9394 8.55807ZM50.0122 8.55807H45.6851C45.7128 7.71303 45.7228 6.71625 45.7261 5.94098H50.0134V8.55807H50.0122Z"
              fill="white"
            />
            <path
              d="M47.0136 6.63744L47.4887 7.96759C47.5031 8.02739 47.5695 8.06394 47.6227 8.06394H48.4522C48.5032 8.06394 48.5486 8.04068 48.5741 8.00192C48.5984 7.96426 48.6018 7.91886 48.5851 7.87788L48.1067 6.53001C48.0801 6.47685 48.0281 6.44141 47.976 6.44141H47.1465C47.0966 6.44141 47.0534 6.46355 47.0268 6.50121C47.0003 6.53997 46.9947 6.58981 47.0136 6.63744Z"
              fill="white"
            />
            <path
              d="M48.0192 10.2092C47.9926 10.156 47.9405 10.1206 47.8885 10.1206H47.06C47.0102 10.1206 46.967 10.1428 46.9404 10.1804C46.9138 10.2192 46.9083 10.269 46.9271 10.3166L47.5163 11.9802C47.5307 12.0377 47.5861 12.0765 47.6503 12.0765H48.4799C48.5297 12.0765 48.5729 12.0555 48.5995 12.0167C48.6261 11.9779 48.6316 11.9281 48.6128 11.8805L48.0203 10.2092H48.0192Z"
              fill="white"
            />
          </svg>
        </div>
        <div className={styles.text}>提供 AI 技术支持</div>
      </div>
    </div>
  );
};

export default BorderBox;
